<template>
  <div>
    <a-form layout="inline" :model="queryModel" v-if="searchBox">
      <a-form-item label="搜索词">
        <a-input v-model:value="queryModel.keyWord" placeholder="请输入搜索关键字名称" />
      </a-form-item>
      <a-form-item label="状态" name="region">
        <a-select v-model:value="queryModel.status" placeholder="请选择维修单状态">
          <a-select-option :value="0">待分配</a-select-option>
          <a-select-option :value="1">处理中</a-select-option>
          <a-select-option :value="2">已完成</a-select-option>
          <a-select-option :value="3">已拒绝</a-select-option>
          <a-select-option :value="4">已取消</a-select-option>
          <a-select-option :value="5">待评价</a-select-option>
        </a-select>
      </a-form-item>
      <a-space>
        <a-button type="primary" @click="list">查询</a-button>
        <a-button @click="resetQuery">重置</a-button>
      </a-space>
    </a-form>
    <div class="functionBox">
      <a-space class="left">
        <a-popconfirm title="是否要真的要批量删除这些维修申请嘛!" @confirm="remove">
          <template #icon><question-circle-outlined style="color: red" /></template>
          <a-button type="dashed" :icon="h(MinusOutlined)" :disabled="rowsData.length == 0">删除</a-button>
        </a-popconfirm>
      </a-space>
      <a-space class="right">
        <a-button size="small" shape="circle" :icon="h(ReloadOutlined)" @click="list()" />
        <a-button size="small" shape="circle" :icon="h(SearchOutlined)" @click="() => searchBox = !searchBox" />
      </a-space>
    </div>
    <div ref="basePoint" :style="`height: ${ windowHeight - elementToTopHight - 7 }px !important;`">
      <a-table
        :columns="columns"
        :data-source="data"
        :pagination="false"
        @resizeColumn="handleResizeColumn"
        :locale="{ emptyText: '暂无数据' }"
        :rowKey="( record : Repair ) => record.id"
        :row-selection="{ onChange: selectData }"
        :scroll="{ y: ( windowHeight - elementToTopHight - 116 ) + 'px' }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'floorName'">
            <span v-if="record.house">{{ record.house.floorName }}</span>
          </template>
          <template v-if="column.dataIndex === 'unitNumber'">
            <span v-if="record.house">{{ record.house.unitNumber }}</span>
          </template>
          <template v-if="column.dataIndex === 'floor'">
            <span v-if="record.house">{{ record.house.floor }}</span>
          </template>
          <template v-if="column.dataIndex === 'building'">
            <span v-if="record.house">{{ record.house.building }}</span>
          </template>
          <template v-if="column.dataIndex === 'attachmentUrl'">
            <a-image
                v-if="record.attachmentUrl"
                style="border-radius: 8px;"
                :width="90"
                :src="proxy.PicPrefixUrl + record.attachmentUrl"
            />
          </template>
          <template v-if="column.dataIndex === 'problemType'">
            <a-tag color="#55acee" v-if="record.problemType == 3">管道</a-tag>
            <a-tag color="#cd201f" v-if="record.problemType == 2">电力</a-tag>
            <a-tag color="#3b5999" v-if="record.problemType == 1">设施</a-tag>
            <a-tag color="#55acee" v-if="record.problemType == 0">其他</a-tag>
          </template>
          <template v-if="column.dataIndex === 'status'">
            <a-tag color="blue" v-if="record.status === 0">待分配</a-tag>
            <a-tag color="orange" v-if="record.status === 1">处理中</a-tag>
            <a-tag color="green" v-if="record.status === 2">已完成</a-tag>
            <a-tag color="red" v-if="record.status === 3">已拒绝</a-tag>
            <a-tag color="pink" v-if="record.status === 4">已取消</a-tag>
            <a-tag color="pink" v-if="record.status === 5">待评价</a-tag>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-button type="link" size="small" @click="info(record)">详情</a-button>
            <a-popconfirm title="是否要真的要删除这个维修申请嘛!" @confirm="remove([record.id])">
              <template #icon><question-circle-outlined style="color: red" /></template>
              <a-button type="link" size="small" class="removeBt">删除</a-button>
            </a-popconfirm>
            <a-dropdown>
              <a-button type="link">
                更多操作
                <DownOutlined />
              </a-button>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click="sendOrders({ repairId: record.id , userId : record.maintenanceStaffId })" v-if="[0,1].indexOf(record.status) != -1">
                    <ToolOutlined />
                    <span class="operationItem">分配维修工</span>
                  </a-menu-item>
                  <a-divider class="divider" v-if="[0,1].indexOf(record.status) != -1" />
                  <a-menu-item @click="changeStatus(record.id,record.status)" v-if="[0,1].indexOf(record.status) != -1">
                    <DeploymentUnitOutlined />
                    <span class="operationItem">改变状态</span>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </template>
        </template>
      </a-table>
      <div class="pagination">
        <a-pagination
            size="small"
            :disabled="total == 0"
            :total="total"
            show-size-changer
            @change="pageChange"
            show-quick-jumper />
      </div>
    </div>

    <a-modal
        v-model:open="sendOrdersStore.open"
        title="分配维修师傅"
        width="500px"
        @ok="sendOrdersOk"
        @cancel="resetSendOrders"
    >
      <a-form
          ref="orderRef"
          :model="sendOrdersStore.order"
          :rules="orderRules"
      >
        <a-form-item label="维修师傅" name="userId">
          <a-select v-model:value="sendOrdersStore.order.userId" placeholder="请选择维修师傅">
            <a-select-option :value="item.id" v-for="item in sendOrdersStore.user">{{ item.realName }} - {{ item.phoneNumber }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal
        v-model:open="infoStore.open"
        title="维修单详情"
        width="800px"
        :footer="null"
    >
      <a-watermark :content=" loginStore.loginInfo.user.user.properties ? `${loginStore.loginInfo.user.user.properties.propertyName}-${loginStore.loginInfo.user.user.realName}` : ''">
          <a-descriptions bordered>
            <a-descriptions-item label="楼宇名称">{{ infoStore.info.house.floorName }}</a-descriptions-item>
            <a-descriptions-item label="单元号">{{ infoStore.info.house.unitNumber }}</a-descriptions-item>
            <a-descriptions-item label="楼层">{{ infoStore.info.house.floor }}</a-descriptions-item>
            <a-descriptions-item label="房间号">{{ infoStore.info.house.building }}</a-descriptions-item>
            <a-descriptions-item label="问题类型">
              <a-tag color="#55acee" v-if="infoStore.info.problemType == 3">管道</a-tag>
              <a-tag color="#cd201f" v-if="infoStore.info.problemType == 2">电力</a-tag>
              <a-tag color="#3b5999" v-if="infoStore.info.problemType == 1">设施</a-tag>
              <a-tag color="#55acee" v-if="infoStore.info.problemType == 0">其他</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="状态">
              <a-tag color="blue" v-if="infoStore.info.status === 0">待分配</a-tag>
              <a-tag color="orange" v-if="infoStore.info.status === 1">处理中</a-tag>
              <a-tag color="green" v-if="infoStore.info.status === 2">已完成</a-tag>
              <a-tag color="red" v-if="infoStore.info.status === 3">已拒绝</a-tag>
              <a-tag color="pink" v-if="infoStore.info.status === 4">已取消</a-tag>
              <a-tag color="pink" v-if="infoStore.info.status === 5">待评价</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="附件" :span="3">
                <a-image
                    v-if="infoStore.info.attachmentUrl"
                    style="border-radius: 8px;"
                    :width="160"
                    :src="proxy.PicPrefixUrl + infoStore.info.attachmentUrl"
                />
            </a-descriptions-item>
            <a-descriptions-item label="问题描述" :span="3">
              {{ infoStore.info.problemDescription }}
            </a-descriptions-item>
            <a-descriptions-item label="维修师傅" :span="3">
                  <div class="worker">
                    <span>姓名: {{ infoStore.worker.realName }}</span>
                    <span>联系电话: {{ infoStore.worker.phoneNumber }}</span>
                  </div>
            </a-descriptions-item>
            <a-descriptions-item label="报修用户" :span="3">
              <div class="worker">
                <span>姓名: {{ infoStore.user.realName }}</span>
                <span>联系电话: {{ infoStore.user.phoneNumber }}</span>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="上报时间" :span="1.5">
                {{ infoStore.info.reportTime }}
            </a-descriptions-item>
            <a-descriptions-item label="维修时间" :span="1.5">
              {{ infoStore.info.completionTime }}
            </a-descriptions-item>
            <a-descriptions-item label="备注" :span="1.5">
              {{ infoStore.info.remark }}
            </a-descriptions-item>
            <a-descriptions-item label="评分" :span="1.5">
              <a-rate v-model:value="infoStore.info.score"  :disabled="true" />
            </a-descriptions-item>
            <a-descriptions-item label="服务评价" :span="3">
              {{ infoStore.info.appraise }}
            </a-descriptions-item>
          </a-descriptions>
      </a-watermark>
    </a-modal>

    <a-modal
        v-model:open="changeStatusStore.open"
        title="改变状态"
        width="500px"
        @ok="changeStatusOk"
        @click="resetChangeStatus"
    >
      <a-form
          ref="changeStatusFrom"
          :model="changeStatusStore.info"
          :rules="changeStatusStore.rules"
          :label-col="{ style: { width: '80px' } }"
      >
        <a-form-item label="状态" name="status">
          <a-select v-model:value="changeStatusStore.info.status" placeholder="请选择维修单状态">
            <a-select-option :value="0">待分配</a-select-option>
            <a-select-option :value="1">处理中</a-select-option>
            <a-select-option :value="2">完成</a-select-option>
            <a-select-option :value="3">拒绝</a-select-option>
            <a-select-option :value="4">取消</a-select-option>
            <a-select-option :value="5">待评价</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="维修师傅" v-if="[0,1].indexOf(changeStatusStore.info.status) != -1">
          <a-select v-model:value="changeStatusStore.info.maintenanceStaffId" placeholder="请选择维修师傅">
            <a-select-option :value="item.id" v-for="item in changeStatusStore.user">{{ item.realName }} - {{ item.phoneNumber }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="备注" name="remark">
          <a-input v-model:value="changeStatusStore.info.remark" />
        </a-form-item>
      </a-form>
    </a-modal>

  </div>
</template>

<script setup lang="ts">

    import DynamicHeight from "@/utils/DynamicHeight";

    const { basePoint , windowHeight , elementToTopHight } = DynamicHeight();
    import useRepair from "@/hooks/useRepair";
    import { h , getCurrentInstance } from "vue";
    import {
      PlusOutlined,
      QuestionCircleOutlined,
      ReloadOutlined,
      SearchOutlined,
      MinusOutlined,
      DownOutlined ,
      ToolOutlined,
      DeploymentUnitOutlined
    } from "@ant-design/icons-vue";
    import { useLoginStore } from "@/stores/loginStore"
    import type {Repair} from "@/interface/Repair";

    const {
      queryModel , list , resetQuery , searchBox ,
      columns , data  , total , pageChange ,
      handleResizeColumn , sendOrdersStore,
      sendOrders, sendOrdersOk , orderRules ,
      resetSendOrders , orderRef , info , infoStore ,
      selectData , rowsData , remove , changeStatus ,
      changeStatusStore , changeStatusFrom , resetChangeStatus ,
      changeStatusOk
    } = useRepair();

    const loginStore = useLoginStore();

    const { proxy } = getCurrentInstance() as any;
</script>

<style scoped lang="scss">
    .functionBox {
      margin: 18px 0 12px 0;
      display: flex;
      justify-content: space-between;
    }
    .pagination {
      margin: 8px 0;
      display: flex;
      justify-content: end;
    }
    .worker {
      display: flex;
      justify-content: start;
      gap: 26px;
      align-items: center;
    }
    .divider {
      margin: 0 !important;
    }
    .operationItem {
      margin-left: 6px !important;
    }
</style>
